<template>
	<view>
		<uni-row>
			<view class="navbar">
				<view class="nav-item" :class="{current:currentIndex === 0}" @click="handleChange(0)">
					明天
				</view>
				<view class="nav-item" :class="{current:currentIndex === 1}" @click="handleChange(1)">
					后天
				</view>
			</view>
		</uni-row>
    <uni-row>
      <view class="swiper-box">
        <scroll-view class="backg">
          <uni-row>
            <uni-col class="info-box" v-for="(feed) in feeds">
              <uni-row style="margin-left: 10px">
                <uni-col :span="14">
                  <uni-title type="h1" :title="feed.number"></uni-title>
                </uni-col>
                <uni-col :span="8">
                  <uni-title type="h3" :title="feed.num"></uni-title>
                </uni-col>
              </uni-row>
            </uni-col>
          </uni-row>
        </scroll-view>
      </view>


    </uni-row>
	</view>
</template>

<script setup lang="ts">
import {computed, ref} from "vue"

	import {onLoad} from "@dcloudio/uni-app";
  import {FeedDataHandle} from "../../pagesVM/feed";
  import UniRow from "../../uni_modules/uni-row/components/uni-row/uni-row.vue";
  import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col.vue";
  import UniTitle from "../../uni_modules/uni-title/components/uni-title/uni-title.vue";
import {parseTime} from "../../util/auth";

  const {getFeedList,feedsList} = FeedDataHandle()

	const currentIndex = ref(0)

	const handleChange = (index:number)=>{
		currentIndex.value = index
	}

  const feeds = computed(()=>{
	  console.log(feedsList.value);
    return feedsList.value?.filter(it=>{
      if (currentIndex.value == 0){
        let date = new Date();
        date.setDate(date.getDate()+1);
        return parseTime(date,'{y}-{m}-{d}') == parseTime(it.reloadDay,'{y}-{m}-{d}')
      }
      if (currentIndex.value == 1){
        let date = new Date();
        date.setDate(date.getDate() + 2);
        return parseTime(date,'{y}-{m}-{d}') == parseTime(it.reloadDay,'{y}-{m}-{d}')
      }
    })
  })

	onLoad(()=>{
		getFeedList()
	})

</script>

<style scoped lang="scss">
	.navbar {
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 60px;
		background: #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
		z-index: 1000;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #3a3a3a;
			position: relative;

			&.current {
				color: #4cd964;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120px;
					height: 0;
					border-bottom: 4px solid #4cd964;
				}
			}
		}
	}

  .info-box {
    margin: 10px;
    border-radius: 5px;
    padding: 20px;
    background-color: white;
  }

  .swiper-box {
    margin-top: 60px;
    height: 100%;
  }

  .backg {
    background-color: rgba(240, 240, 240, 0.76);
    height: 100%;
  }

</style>
